<template>
  <div>
    <div class="bookList-container">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in showBooks"
          :key="index"
          class="book-div"
          :span="4"
        >
          <el-card
            :body-style="{ padding: '0px', backgroundColor: '#f4f2ee' }"
            shadow="hover"
          >
            <div style="height: 200px">
              <a :href="'#/bookDetail/' + item.id">
                <!-- <img
                  class="image"
                  alt="加载失败"
                  width="100%"
                  :src="item.bookImgs[0] ? item.bookImgs[0].imgName:imgUrl"
                />-->
                <el-image
                  style="width: 100%; height: 100%"
                  :src="item.bookImgs[0] ? item.bookImgs[0].imgName : imgUrl"
                />
              </a>
            </div>
            <div style="padding: 14px; height: 110px">
              <div class="bookDetail-bookName">
                <a :href="'#/bookDetail/' + item.id">
                  <span :title="item.bookName">{{ item.bookName }}</span>
                </a>
              </div>
              <div class="bookDetail-author">
                <span :title="item.author">{{ item.author }}</span>
              </div>
              <div class="bookDetail-price">
                <span>
                  <i class="iconfont icon-qian" />
                  {{ item.price | num2Point }}
                </span>
                <span>
                  <el-button
                    icon="icon-span el-icon-shopping-cart-full"
                    circle
                    type="warning"
                    @click="addToCart(item.id)"
                  />
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="page-col">
          <!-- <el-col :span="24"> -->
          <div class="block">
            <!-- <span class="demonstration">直接前往</span> -->
            <el-pagination
              background
              :current-page.sync="bookPageForm.current"
              :page-size="bookPageForm.size"
              :total="bookPageForm.total"
              layout="prev, pager, next, jumper,total"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- </el-col> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import '@/style/iconfront.css'
export default {

  data() {
    return {
      imgUrl: require('@/assets/hamburger.jpg')
    }
  },
  computed: {
    searchBookForm() {
      return this.$store.getters.searchBookForm
    },
    showBooks() {
      return this.$store.getters.showBooks
    },
    isLogin() {
      return this.$store.getters.isLogin
    },
    bookPageForm() {
      return this.$store.getters.bookPageForm
    },
    userDetail() {
      return this.$store.getters.userDetail
    },
    userCart() {
      return this.$store.getters.userCart
    }
  },
  created() {
    // this.getBooks()
  },
  methods: {
    prevPage() {

    },
    nextPage() {

    },

    // val:前往的页数
    handleCurrentChange(val) {
      if (this.searchBookForm.getBooksByCid) {
        this.$store.dispatch('book/getBookByCid')
      } else if (this.searchBookForm.getBooksByCid === false && this.searchBookForm.str) {
        this.$store.dispatch('book/searchBook')
      } else {
        this.$store.dispatch('book/getList')
      }
    },
    addToCart(bookId) {
      setTimeout(() => {
        this.doAddCart(bookId)
      }, 1000)
    },
    doAddCart(bookId) {
      // if (!this.userCart) {
      //   this.$notify.error({
      //     title: '失败',
      //     message: '添加失败，请稍后重试'
      //   })
      //   return
      // }
      if (this.isLogin) {
        // 判断用户是已经添加过这个商品，
        let isExit = false
        if (!this.userCart) {
          // 购物车为空，直接添加
          this.addCartDirect(bookId)
          return
        } else {
          this.userCart.forEach((item) => {
            // console.log('item:' + item.bookId + ' ' + 'book:' + bookId)
            // eslint-disable-next-line eqeqeq
            if (item.bookId == bookId) {
              isExit = true
            }
          })
        }
        // console.log(isExit)
        // 如果添加过这个商品，则直接在本地修改商品数量，不能超过3
        if (isExit) {
          // console.log('进来了')
          const tempUserCart = this.userCart
          let donotAdd = false
          tempUserCart.forEach(element => {
            // eslint-disable-next-line eqeqeq
            if (element.bookId == bookId) {
              // console.log('num' + element.num)
              if (element.num < 3) {
                element.num = element.num + 1
              } else {
                // 当前数量已经达到三个了，不能添加了
                // console.log('xxxxx')
                this.$notify.error({
                  title: '失败',
                  message: '当前商品最多添加3个'
                })
                donotAdd = true
              }
            }
          })
          if (donotAdd) {
            return
          }
          this.$store.commit('cart/SET_USERCART', tempUserCart)
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          })
          return
        } else {
          // 如果没有添加过这个商品，则添加商品到数据库，再次添加也只在本地修改
          const obj = {
            userId: this.userDetail.id,
            bookId,
            num: 1
          }
          this.$store.dispatch('cart/addCart', obj).then(res => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success'
            })
            return
          })
        }
      } else {
        // 用户未登陆,提示用户登陆
        this.$notify({
          title: '警告',
          message: '请登陆后执行操作',
          type: 'warning'
        })
      }
    },
    addCartDirect(bookId) {
      const obj = {
        userId: this.userDetail.id,
        bookId,
        num: 1
      }
      this.$store.dispatch('cart/addCart', obj).then(res => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success'
        })
        return
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:active {
  text-decoration: none;
  color: #333333;
}
a:hover {
  color: #409eff;
}
.image {
  height: 200px;
}

.bookList-container {
  margin-top: 20px;
  // background-color: #78ab88;
  .el-row {
    padding: 20px;
    .el-col {
      margin: 20px 0;
      .el-card {
        .bookDetail-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-weight: 800;
            color: red;
          }
          .icon-span {
            &:hover {
              color: #007acc;
            }
          }
        }
        .bookDetail-bookName {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .bookDetail-author {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
    .page-col {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
